<template>
	<div>
		<span>全选:</span>
		<input type="checkbox" v-model="isAll"/>
		<button @click="btn">反选</button>
		<ul>
			<li v-for='(item,index) in arr' :key="index">
				<!-- 对象.c 关联选中状态 -->
				<input type="checkbox" v-model="item.c"/>
				<span>{{item.name}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	// 目标: 小选框 -> 全选
	export default {
		data() {
			return {
				arr: [{
						name: "猪八戒",
						c: false,
					},
					{
						name: "孙悟空",
						c: false,
					},
					{
						name: "唐僧",
						c: false,
					},
					{
						name: "白龙马",
						c: false,
					},
				],
			};
		},
		computed:{
			// isAll(){
			// return	this.arr.every(obj => obj.c)
			// }
			isAll:{
				get(){
					return this.arr.every(obj => obj.c)
				},
				set(val){
					console.log(val)
					this.arr.forEach(item => item.c = val
					)
				}
			}
		},
		methods:{
			btn(){
				this.arr.forEach(item =>item.c === true)
			}
		}
	};
</script>

<style>
</style>
